<template>
  <div class="alarmMain">
    <div class="alarmMainUp">
      <div class="select">
        <span
          >告警声选择：
          <select v-model="selectedOption" @change="handleSelect">
            <option value="" disabled>请选择</option>
            <option v-for="(item, index) in options" :key="index">
              {{ item }}
            </option>
          </select>
        </span>
        <span
          >歌曲目录：
          <select v-model="selectedOption" @change="handleSelect">
            <option value="" disabled>请选择</option>
            <option v-for="(item, index) in options" :key="index">
              {{ item }}
            </option>
          </select>
        </span>
      </div>
      <div class="table">
        <div
          class="alarmTable"
          v-for="(item, index) in warningClock"
          :key="index"
        >
          <span>{{ index + 1 }}</span>
          <span>{{ item }}</span>
        </div>
      </div>
    </div>
    <div class="alarmMainBottom">
      <button>恢 复 出 厂 设 置</button>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const selectedOption = ref("");
const options = ref(["wanrning1", "warning2"]);
const warningClock = ref([
  "you are the only one for me",
  "刀郎",
  "大壮",
  "不仅仅是喜欢",
  "广东爱情故事",
]);
</script>
<style  scoped>
@import url("./soundless/alarmClock.less");
</style>